@charset "utf-8";
/*首页*/
body{
    min-width: 1280px;
}
$bfb_width:100%;
$bfb_height:100%;
$margin_center:0 auto;
$text_center:center;
$color_black:#000000;
$color_white:#ffffff;
$left_float:left;
$right_float:right;
@mixin hover($bg,$border_bottom){
    background: $bg;
    border-bottom: $border_bottom;
}
$xd_position:relative;
$jd_position:absolute;
@mixin boc($border_top){
    border-top:$border_top;
}


#web{
    width:$bfb_width;
    height: $bfb_height;
    header{
        width: $bfb_width;
        .top{
            background: #dfdfde;
            height: 40px;
            line-height: 40px;
            .main{
                width: 995px;
                margin: $margin_center;
                a{
                    color: $color_black;
                    font-size: 14px;
                    margin-right: 25px;
                }
            }
            
        }
        /*导航部分*/
        nav{
             width: 995px;
             height: 96px;
             margin: $margin_center;
            .logo{
                width: 304px;
                height: 96px;
                display: inline-block;
                img{
                    width: $bfb_width;
                    height: $bfb_height;
                }
            }
            ul{
                 width:600px;
                li{
                     float: $left_float;
                     width: 85px;
                     height: 96px;
                     padding-top: 28px;
                     line-height: 24px;
                     text-align: $text_center;
                     color: $color_black;
                     box-sizing: border-box;
                     font-weight: bold;
                     font-size: 14px;
                    a{
                         color: $color_black;
                    }
                }
                /*鼠标放在元素上的状态*/
                li:hover,.active{
                     @include hover(#faf8f8,3px solid #3c9cd3)
                }
            }
        }
    }  
    /*轮播*/
    .carou{
         position: $xd_position;
         padding: 0;
         margin: 0;
        .lb{
             width: $bfb_width;
             height: 545px;
            img{
                 width: $bfb_width;
                 height: $bfb_height;
            }
        }
        .point{
             width: $bfb_width;
             height: 10px;
             position: $jd_position;
             left: 50%;
             margin-left: -50px;
             bottom: 17px;
            li{
                 width: 10px;
                 height: 10px;
                 border-radius: 50%;
                 background: #a3b3e9;
                 float: $left_float;
                 margin-right: 20px;
            }
            li:last-child{
                 margin-right: 0px;
            }
        }
    }
    .product{
         width: $bfb_width;
         padding-top: 68px;
         background: #F6F6F6;
        #big_bgc{
            width: 996px;
            margin: $margin_center;
            .item{
                 width: 315px;
                 height: 473px;
                 background: #FFF;
                 border: solid 0.1px;
                 margin-left: 15px;
                 box-shadow:2px 2px #DFDFDE;
                .news{
                     width: $bfb_width;
                     height: 167px;
                     background: #2594cb;
                     position: $xd_position;
                     text-align: $text_center;
                    img{
                        padding-top: 15px;
                   }
                    h2{
                        font-size: 16px;
                        line-height: 32px;
                        color: $color_white;
                   }
                    h3{
                        font-size: 14px;
                        line-height: 32px;
                        color: $color_white;
                   }
                    .line{
                         width: 90px;
                         height: 1px;
                         background: $color_white;
                         margin: $margin_center;
                   }
                }
                .news:after{
                    content: "";
                    position: $jd_position;
                    bottom: -21px;
                    left: 50%;
                    margin-left: -21px;
                    display: block;
                    @include boc(21px #2594cb solid);
                    border-left: 21px solid transparent;
                    border-right: 21px solid transparent;
                }
                .item_mid{
                     width: 285px;
                     height: 152px;
                     margin: $margin_center;
                     margin-top: 28px;
                     border-bottom: 1px dashed darkgray;
                    h5{
                         margin-bottom: 16px;
                    }
                     .youbian p{
                         width: 130px;
                         font-size: 14px;
                         line-height: 26px;
                         font-weight: bold; 
                    }
                }
                
                
                .xin_pin{
                    background: #3ed1a4; 
                }
                .xin_pin::after{
                    @include boc(21px #3ed1a4 solid);
                }
                .xin_pin_mid img[src^="img/xin_ping"]{
                     margin-left: 11px;
                     margin-right: 11px;
                     margin-top: 48px;
                }
                .xin_pin_mid img[src^="img/gun_dong1"]{
                     margin-top: 120px;
                     margin-left: 13px;
                }
                .xin_pin_mid img[src^="img/gun_dong2"]{
                     margin-top: 120px;
                     margin-right: 12px;
                }
                .xin_pin_xia h6{
                         color: #2395CB;
                         font-size: 14px;
                         text-align: $text_center;
                         margin-top: 32px;
                         margin-bottom: 16px; 
                     }
                     .xin_pin_xia p{
                         font-size: 12px;
                         text-align: $text_center;
                     }
                }
                .item .pingpai{
                    background: #895ea3;
                }
                .item .pingpai::after{
                    @include boc(21px #895ea3 solid);
                }
                .pingpai_tp{
                     width: 289px;
                     margin: $margin_center;
                     margin-top: 44px;
                }
                .pingpai_bg{
                    width: 308px;
                    height: 76px;
                    background: url(../img/pingpai_tp2.jpg) no-repeat;
                    margin: $margin_center;
                    margin-top: 30px;
                    p{
                       font-size: 12px;
                       width: 206px;
                       margin: $margin_center;
                       line-height: 22px;
                       padding-top: 30px;  
                    }
                }
                
                
                .item_list ul{
                      font-size: 12px;
                      margin-top: 24px;
                      margin-left: 24px;
                     li{
                         width: 4px;
                         height: 4px;
                         border-radius: 50%;
                         background: #2395cb;
                         margin-top: 6px;
                         margin-right: 6px;
                         color: $color_black;
                        dd,a{
                             margin-bottom: 6px;
                             color: $color_black;
                        }  
                     }
                   
            }
               
        }
    }
     .about{
             background: #f6f6f6;
          .about_h{
                 width: 248px;
                 height: 42px;
                 margin: $margin_center 50px;
                 padding-top: 50px;
                 
                 h6{
                    font-size: 18px;
                    font-weight: bold;
                    text-align: $text_center;
                }
                 .us{
                    width: 247px;
                    height: 15px;
                    font-size: 10px;
                    color:#c9c9c9 ;
                    margin: 0 auto;
                     p{
                        width: 82px;
                        font-size: 10px;
                        color:#c9c9c9 ;
                        font-weight: bold;
                        margin-left: 9px;
                        margin-right: 6px;
                    }
                    .line{
                        width: 75px;
                        height: 1px;
                        background: #c9c9c9;
                        margin-top: 6px;
                    }
                }
            }
            
         .about_bg{
             width: 100%;
             height: 343px;
             background: url(../img/backgroud.jpg);
             p{
                 text-align: center;
                 font-size: 13px;
                 line-height: 24px;
            }
             p:first-child{
                 padding-top: 42px;
            }
             #div_yi_dong{
                width: 900px;
                height: 160px;
                margin: 0 auto;
                background: white;
                position: relative;
                overflow: hidden;
                margin-top: 4px;
                 ul{
                    margin: 0px;
                    padding: 0px;
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    width: 2000px;
                     li{
                        float: left;
                        margin-right: 21px;
                    }
                }
            }
        }
     }
     
      .contact{
           margin-bottom: 116px;
          .lianxi_us{
             height: 105px;
             width: 100%;
             background: #f6f6f6;
             .about_h{
                 width: 248px;
                 height: 42px;
                 margin: $margin_center 50px;
                 padding-top: 30px;
            }
             h6{
                font-size: 18px;
                font-weight: bold;
                text-align: $text_center;
            } 
             .us{
                width: 248px;
                height: 15px;
                font-size: 10px;
                color:#c9c9c9 ;
                margin: $margin_center;
                 p{
                    width: 82px;
                    font-size: 10px;
                    color:#c9c9c9 ;
                    font-weight: bold;
                    margin-left: 9px;
                    margin-right: 7px;
                }
                 .line{
                    width: 75px;
                    height: 1px;
                    background: #c9c9c9;
                    margin-top: 7px;
                }
            }
                
     }
     #dibu{
                 width: 1080px;
                 margin: $margin_center;
                 .left{
                     width: 434px;
                     height: 421px;
                     margin-right: 38px;
                     margin-top: 20px;
                     .lefe_top ul{
                         li{
                            font-size: 14px;
                            color: #989898;
                            padding-bottom:13px ;
                             img{
                                vertical-align: middle;
                                margin-left: 26px;
                                padding-right: 15px;
                                text-align: $text_center; 
                            }
                        }
                         .tb{
                            padding-bottom: 0;
                        } 
                     }
                     .bottom{
                        margin-top: 43px;
                    }
                }
                  
                  .right{
                     width: 582px;
                     margin-top: 14px;
                     p{
                         color: #989898;
                         font-size: 14px;
                         line-height: 30px;
                        
                    }
                     input{
                         width: 582px;
                         height: 33px;
                         background: #f9f8f8;
                         border: dashed #d4d2d2;
                         margin-bottom: 10px;
                         transition-property: background-color;
                         transition-duration: 3s;
                         transition-delay: 200ms;
                    }
                     
                     input:last-of-type{
                             width: 94px;
                             height: 30px;
                             background: #3c9cd3;
                             border: none;
                             margin-bottom: 0;
                             margin-top: 8px;
                             color: $color_white;
                             font-size: 12px;
                        }
                        input:last-of-type:hover{
                             color: black;
                             font-size: 14px;
                        }
                     textarea{
                         width: 582px; 
                         height: 120px;
                         background: #f9f8f8;
                         border: dashed #d4d2d2;
                         resize: none;
                         transition-property: background-color;
                         transition-duration: 3s;
                         transition-delay: 200ms;
                    }
                    input:hover,textarea:hover{
                             background: skyblue;
                         }
                }
            }
        }
     footer{
         height: 137px;
         width: $bfb_width;
         margin: $margin_center;
         .foot{
              height: 102px;
              width: $bfb_width;
              background: #3c9cd3;
              color: white;
             p{
                 padding-top: 25px;
                 text-align: center;
                 color: $color_white;
                 font-size: 12px;
                 a{
                     color: $color_white;
                 }
                 a:hover{
                     color:  darkgrey;
                 }
                 img{
                     vertical-align: middle;
                     padding-left: 10px;
                }
            }
             p:first-child{
                 padding-top: 20px;
            }
            
             .WXimg{
                 padding-left: 22px;
            }
         }
         .ban_quan{
              height: 25px;
              width: $bfb_width;
              background: #1c1b29;
              color: $color_white;
              font-size: 12px;
              text-align: $text_center;
              line-height: 24px;
         }
    }   
}



/*产品详细页面*/
section{
     width: 1066px;
     margin: $margin_center;
     .sec_nav{
         padding-left: 12px;
         font-size: 12px;
         margin-top: 10px;
         margin-bottom: 10px;
         a{color: black;}
         a:hover{color: #007AFF;}
         .fuhao{padding: 0 7px 0;}}
     .product_sxj{
         width: 1064px;
         height: 420px;
         border: 1px solid #b9b9b9;
         border-left:0;
         border-right:0;
         border-top:0;
         margin-bottom: 42px;
         .zuo_tp{
             width: 495px;
             height: 330px;
             text-align: $text_center;
             background: url(../img/proinfo_img/search.png) bottom right no-repeat;
             border: 1px solid #b9b9b9;
             border-left:0;
             border-top:0;
             border-bottom:0;
             .big_sxj{
                 padding-top: 58px;
                 padding-bottom: 19px;
                 margin-bottom: -2px; 
                 transition: 3s;
                 &:hover{
                     transform: rotateZ(360deg);
                 }
             }
             ul{
                 
                 li{
                     float: left;
                     width: 96px;
                     height: 89px;
                     border: 1px solid #b9b9b9;
                     padding-right: 1px;
                     a{
                         text-align: center;
                         img{
                             transition: 3s;
                         }
                         img:hover{
                                 transform: rotateY(360deg);
                             }
                     }
                 }
             }
         }
         .you_nr{
             width: 500px;
             margin-left: 61px;
             p:first-child{
                 color: #468ad9;
                 font-size: 24px;
                 padding-top: 68px;
                 padding-bottom: 20px;
             }
             p:nth-child(2){
                 font-size: 24px;
                 padding-bottom: 24px;
             }
             p:nth-child(3){
                 font-size: 18px;
                 padding-bottom: 10px;
             }
             p{
                 font-size: 12px;
                 line-height: 20px;
             }
             input{
                 width: 170px;
                 height: 50px;
                 background: #468bd9;
                 border-radius: 10px;
                 margin-right: 50px;
                 margin-top: 35px;
                 color: white;
             }
             input:hover{
                 background: #b5b5b5;
                 color: white;
             }
             input:last-child{
                 background: #b5b5b5;
                 color: white;
                 &:hover{
                     background: #468bd9;
                     color: white;
                 }
             }
         }
     }     
}

.pre_dh{
    width: 100%;
    ul{
        width: 100%;
        height: 100px;
        background: #b5b5b5;
        li{
            float: left;
            height: 93px;
            width: 94px;
            margin-right: 60px;
            line-height: 100px;
            text-align: center;
            &:hover{
                background: white;
                border-bottom: 7px solid #3c9cd3;
                a{
                    color: #3c9cd3;
                }
            }
            a{
                color: white;
                height: 100px;
                width: 94px;  
            }
        }
        .active{
            margin-left: 184px;
            background: white;
            border-bottom: 7px solid #3c9cd3;
            a{
                color: #3c9cd3;
            }
        }
    }
}

.pre_nei_rong{
    width: 986px;
    margin: $margin_center;
    margin-top: 73px;
    text-align: center;
    div{
        margin-bottom: 56px;
        p:first-child{
            font-size: 34px;
            color: #0b5ae4;
            margin-bottom: 16px;
        }
        img{
             transition: 2s;
             &:hover{
                 transform: scale(1.1);
             }
        }
        p{
            font-size: 12px;
            color: #d5d5d5;
            line-height: 28px;
        }
        p:last-of-type{
            margin-bottom: 36px;
        }
        .float_img{
            width: 618px;
            margin: $margin_center;
            padding-top: 29px;
            .img1{
                padding-top: 83px;
                
            }
        }
    }
}

.pre_tab{
    text-align: center;
    margin-bottom: 130px;
    margin-top: 107px;
}

.dibu_tp{
    width: 986px;
    margin: 70px auto;
    li{
        float: left;
        margin-right: 77px;
        img{
//          transition: 2s;
            &:hover{
                transform: scale(1.1) rotateX(180deg);
            }
        }
    }
    
}
